


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选项卡组件</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/admin/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/admin/layuiadmin/style/admin.css" media="all">
</head>
<style>
    .h4{
        font-size: 15px;
        color: #000;
        font-weight: bold;
    }
    @font-face {
        font-family: 'iconfont';  /* Project id 2565954 */
        src: url('https://at.alicdn.com/t/font_2565954_sign0pp5qp.woff2?t=1621862790306') format('woff2'),
        url('https://at.alicdn.com/t/font_2565954_sign0pp5qp.woff?t=1621862790306') format('woff'),
        url('https://at.alicdn.com/t/font_2565954_sign0pp5qp.ttf?t=1621862790306') format('truetype');
    }
    .iconfont{
        font-family:"iconfont" !important;
        font-size:16px;font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;}
    .layui-layer-admin .layui-layer-ico {
        background: url("/admin/layuiadmin/gb.png") no-repeat!important;
        background-size:16px 16px!important;
        /*background-position: 0px -40px!important;*/
    }
</style>
<body>


<div class="layui-fluid" id="component-tabs">
    <div class="layui-row">
        <div class="layui-col-md12" style="margin-bottom: 15px">
            <div class="layui-card">
                <div class="layui-card-header">预约信息</div>
                <div class="layui-card-body">
                    <div class="layui-row  layadmin-homepage-padding15">
                        <div class="layui-col-md12 layadmin-homepage-padding8">
                            <div class="layui-row layadmin-homepage-text-center">
                                <input type="hidden" name="id" id="id" value="22" />
                                <div class="layui-col-md2 layui-col-sm3 layui-col-xs3" style="display:flex;flex-direction: row;align-items: center;">
                                    <div style="margin-left: 10px;">
                                        <p class="h4">{$list.title} - {$list.tit}</p>
                                        <mdall>预约项目</mdall>
                                    </div>
                                </div>
                                <div class="layui-col-md2 layui-col-sm3 layui-col-xs3" style="display:flex;flex-direction: row;align-items: center;">
                                    <div style="margin-left: 10px;">
                                        <p class="h4">
                                            <span id="nick">{$list.name}</span>
                                            <span>{$list.phone}</span>
                                        </p>
                                        <mdall>预约人</mdall>
                                    </div>
                                </div>
                                <div class="layui-col-md2 layui-col-sm3 layui-col-xs3">
                                    <p class="h4">{$list.addtime}</p>
                                    <mdall>预约时间</mdall>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">记录状态</div>
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-hash">
                        <ul class="layui-timeline">
                            {volist name="statuslist" id="svo"}

                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">{$svo.addtime}</h3>
                                    {$svo.title} {$svo.texter}
                                </div>
                            </li>
                            {/volist}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/admin/layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '/admin/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index','table'], function(){
            var $ = layui.$
                ,admin = layui.admin
                ,table = layui.table
                ,element = layui.element
                ,router = layui.router();

            element.render();

            element.on('tab(component-tabs-brief)', function(obj){
                layer.msg(obj.index + '：' + this.innerHTML);
            });

            //监听工具条
            table.on('tool(LAY-user-managet)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                if(layEvent === 'addressdz'){ //弹框地址
                    var name=data['name'];
                    var mobile=data['phone'];
                    var city=data['cardno'];
                    var bet=data['between'];
                    if(!name){
                        name='无';
                    }
                    if(!mobile){
                        mobile='无';
                    }
                    if(bet==1){
                        var txx='本人';
                    }else if(bet==2){
                        var txx='夫妻';
                    }else if(bet==3){
                        var txx='子女';
                    }else if(bet==4){
                        var txx='子女（无身份证）';
                    }if(bet==5){
                        var txx='父母';
                    }if(bet==6){
                        var txx='其他';
                    }
                    layer.open({
                        title:'就诊信息',
                        type: 1,
                        skin: 'layui-layer-admin',
                        closeBtn: true,
                        area: '350px',
                        anim: 5,
                        shadeClose: true,
                        content: "<div style='padding:20px;'>姓名："+name+"<br/>手机号："+mobile+"<br/>身份证号："+city+"" +"<br/>关系："+txx+
                        "</div>"
                    });
                }
            })

            /* 触发事件 */
            var active = {
                tabAdd: function(){
                    /* 新增一个Tab项 */
                    element.tabAdd('demo', {
                        title: '新选项'+ (Math.random()*1000|0) /* 用于演示 */
                        ,content: '内容'+ (Math.random()*1000|0)
                        ,id: new Date().getTime() /* 实际使用一般是规定好的id，这里以时间戳模拟下 */
                    })
                }
                ,tabDelete: function(othis){
                    /* 删除指定Tab项 */
                    element.tabDelete('demo', '22');
                    othis.addClass('layui-btn-disabled');
                }
                ,tabChange: function(){
                    /* 切换到指定Tab项 */
                    element.tabChange('demo', '33');
                }
            };

            $('#component-tabs .site-demo-active').on('click', function(){
                var othis = $(this), type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });

            /* Hash地址的定位 */
            var layid = router.hash.replace(/^#layid=/, '');
            layid && element.tabChange('component-tabs-hash', layid);

            element.on('tab(component-tabs-hash)', function(elem){
                location.hash = '/'+ layui.router().path.join('/') + '#layid=' + $(this).attr('lay-id');
            });
        });
    </script>
</body>
</html>
